<template>
	<view class="container" style="padding-top: 90rpx">
		<BackGround />

		<view class="closeIcon" @click="back">
			<image src="@/static/arrow-left.png" mode="widthFix"></image>
		</view>

		<view class="nav row">
			<view
				class="nav-item center"
				:class="{ 'nav-item-sel': currentNav === item.value }"
				v-for="(item, index) in navList"
				:key="index"
				@click="changeNav(item)"
			>
				{{ item.label }}
			</view>
		</view>

		<view class="productList">
			<view class="productItem" v-for="(item, index) in list" :key="index">
				<view class="mainImage">
					<image :src="item.images" mode="widthFix"></image>
				</view>

				<!-- 待付款 -->
				<view class="maskLayer">
					<view class="maskLayer-con">
						<image src="@/static/checkIn-bg.png" mode="widthFix" class="maskLayer-con-bg"></image>
						<view class="checkIn-bg-icon">
							<image src="/static/wsc.png" mode="widthFix" v-if="item.isOpenGround == 0"></image>
							<image src="/static/yssc.png" mode="widthFix" v-else></image>
						</view>

						<view class="count">{{ item.openGroundCount }} 人打卡</view>
						<view class="adress">{{ item.openGroundName }}</view>
					</view>
				</view>
			</view>
		</view>

		<up-empty mode="list" v-if="!list.length"></up-empty>
		<uni-load-more :status="loadMoreStatus" v-if="list.length"></uni-load-more>
	</view>
</template>

<script setup>
import { http } from 'uview-plus';
import { ref, getCurrentInstance } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

const { proxy } = getCurrentInstance();

const orderDetailRef = ref(null);

const currentNav = ref(1);
const navList = ref([
	{
		label: '已打卡',
		value: 1
	},
	{
		label: '待打卡',
		value: 0
	}
]);

const list = ref([]);
const total = ref(0);
const pageNum = ref(1);
const loadMoreStatus = ref('more');

async function changeNav(item) {
	currentNav.value = item.value;
	pageNum.value = 1;
	getList();
}

function showDetail(row) {
	orderDetailRef.value.init(row.orderSn);
}

onReachBottom(() => {
	if (list.value.length < total.value) {
		pageNum.value++;
		getList();
	}
});

onPullDownRefresh(() => {
	pageNum.value = 1;
	getList();
});

async function getList() {
	loadMoreStatus.value = 'loading';
	const res = await http.post(`/wx/customer/selectOpenGroundRecordPage?pageNum=${pageNum.value}&pageSize=10`, {
		type: currentNav.value
	});
	if (pageNum.value == 1) {
		list.value = res.rows;
	} else {
		list.value = list.value.concat(res.rows);
	}

	loadMoreStatus.value = 'more';
	total.value = res.total;
	if (list.value.length >= total.value) {
		loadMoreStatus.value = 'noMore';
	}
	uni.stopPullDownRefresh();
}

function back() {
	uni.navigateBack({ delta: 1 });
}

onLoad(async () => {
	getList();
});
</script>

<style lang="scss">
.indexSearchBoxPla {
	font-size: 34rpx;
	color: #aeaeae;
	text-align: center;
}
</style>
<style lang="scss" scoped>
.closeIcon {
	width: 88rpx;
	height: 88rpx;
	margin-left: 48rpx;
	image {
		width: 100%;
		height: 100%;
	}
}

.nav {
	margin-top: 40rpx;
	padding: 0 48rpx;

	&-item {
		width: 192rpx;
		height: 88rpx;
		background: #ffffff;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		padding: 0 28rpx;
		margin-right: 40rpx;

		font-size: 32rpx;
		color: #000000;
	}

	&-item-sel {
		background: #ffd000;
		font-weight: 500;
	}
}

.productList {
	margin: 30rpx 46rpx 100rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.productItem {
		width: 320rpx;
		height: 420rpx;
		border-radius: 60rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 16rpx;

		.mainImage {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.maskLayer {
			width: 320rpx;
			height: 420rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;

			.maskLayer-con {
				padding: 56rpx 0 44rpx 44rpx;
				width: 320rpx;
				height: 420rpx;
				position: relative;

				.maskLayer-con-bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				.checkIn-bg-icon {
					width: 88rpx;
					height: 88rpx;
					position: absolute;
					top: 18rpx;
					right: 14rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}

				.count {
					font-weight: 500;
					font-size: 20rpx;
					color: #000000;
					position: absolute;
					left: 30rpx;
					bottom: 80rpx;
				}

				.adress {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					position: absolute;
					left: 30rpx;
					bottom: 32rpx;
				}
			}
		}

		.maskLayerYfk {
		}

		.maskLayerYqx {
		}

		.pay-btn {
			width: 212rpx;
			height: 320rpx;
			background-color: #ffd000;
			border-radius: 60rpx;
			position: absolute;
			z-index: 30;
			right: 0;
			top: 0;
			view:first-of-type {
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
			}
			// view:nth-child(2) {
			// 	width: 212rpx;
			// 	font-weight: 500;
			// 	font-size: 20rpx;
			// 	color: #030101;
			// 	text-align: center;
			// 	margin-top: 14rpx;
			// }
			image {
				width: 14rpx;
				height: 28rpx;
				margin-left: 10rpx;
			}
		}
	}
}
</style>
